import React from 'react'
import { Tabs, ProductCard, Tag, Button  } from 'react-vant';
import {useNavigate} from 'react-router-dom'


const setlist=['全部','待出行','待支付','退款/已取消']

type Props = {}

const Order = (props: Props) => {
  const navigate=useNavigate()

  const godet=()=>{
    navigate('/detail')
  }
  return (
    <div>
      <Tabs active={0}>
      {setlist.map((item,index) => (
        <Tabs.TabPane key={index} title={item}>
         
        </Tabs.TabPane>
      ))}
    </Tabs>
    <div onClick={()=>{godet()}} style={{width:'100%',height:'150px',
      marginTop:"20px",
      borderRadius:'10px 10px 10px 10px',
      backgroundColor:'#fff',
      margin:'10px 0px 0px 0px'
      }}>
      <div style={{fontWeight:'800',margin:'10px 0px 0px 0px'}}>
        <span style={{marginLeft:'25px',fontSize:'20px'}}>合肥南-南京海 G7740</span>
        <span style={{marginLeft:'68px',fontSize:'20px',color:'rgb(255,131,0)'}}>￥107</span>
      </div>
      <div style={{margin:'10px 0px 0px 0px',display:'flex'}}>
        <span style={{marginLeft:'25px'}}>03车厢18A号</span> <span>李亚</span>
          <p style={{marginLeft:'150px', color:'rgb(3,177,93)'}}>出售成功</p>
        </div>
      <div style={{margin:'10px 0px 0px 0px'}}>
        <span style={{marginLeft:'25px'}}>2022 06-15 06:24至07:14</span>
      </div>
      <Button style={{ marginLeft:'295px',
      borderRadius:'20px 20px 20px 20px',
      border:'1px solid #ccc', backgroundColor:'#fff'}}>退出订单</Button>
    </div>

    
    <div style={{width:'100%',height:'150px',
      marginTop:"20px",
      borderRadius:'10px 10px 10px 10px',
      backgroundColor:'#fff'
      }}>
      <div style={{fontWeight:'800',margin:'10px 0px 0px 0px'}}>
        <span style={{marginLeft:'25px',fontSize:'20px'}}>合肥南-南京海 G7740</span>
        <span style={{marginLeft:'68px',fontSize:'20px',color:'rgb(255,131,0)'}}>￥107</span>
      </div>
      <div style={{margin:'10px 0px 0px 0px',display:'flex'}}>
        <span style={{marginLeft:'25px'}}>03车厢18A号</span> <span>李亚</span>
          <p style={{marginLeft:'150px', color:'rgb(224,32,32)'}}>待支付</p>
        </div>
      <div style={{margin:'10px 0px 0px 0px'}}>
        <span style={{marginLeft:'25px'}}>2022 06-15 06:24至07:14</span>
      </div>
      <Button style={{ marginLeft:'295px',
      borderRadius:'20px 20px 20px 20px',
      border:'1px solid #ccc', backgroundColor:'#fff'}}>退出订单</Button>
    </div>
    <div style={{width:'100%',height:'150px',
      marginTop:"20px",
      borderRadius:'10px 10px 10px 10px',
      backgroundColor:'#fff'
      }}>
      <div style={{fontWeight:'800',margin:'10px 0px 0px 0px'}}>
        <span style={{marginLeft:'25px',fontSize:'20px'}}>合肥南-南京海 G7740</span>
        <span style={{marginLeft:'68px',fontSize:'20px',color:'rgb(255,131,0)'}}>￥107</span>
      </div>
      <div style={{margin:'10px 0px 0px 0px',display:'flex'}}>
        <span style={{marginLeft:'25px'}}>03车厢18A号</span> <span>李亚</span>
          <p style={{marginLeft:'150px'}}>已取消</p>
        </div>
      <div style={{margin:'10px 0px 0px 0px'}}>
        <span style={{marginLeft:'25px'}}>2022 06-15 06:24至07:14</span>
      </div>
      <Button style={{ marginLeft:'295px',
      borderRadius:'20px 20px 20px 20px',
      border:'1px solid #ccc', backgroundColor:'#fff'}}>退出订单</Button>
    </div>
    <div style={{width:'100%',height:'150px',
      marginTop:"20px",
      borderRadius:'10px 10px 10px 10px',
      backgroundColor:'#fff'
      }}>
      <div style={{fontWeight:'800',margin:'10px 0px 0px 0px'}}>
        <span style={{marginLeft:'25px',fontSize:'20px'}}>合肥南-南京海 G7740</span>
        <span style={{marginLeft:'68px',fontSize:'20px',color:'rgb(255,131,0)'}}>￥107</span>
      </div>
      <div style={{margin:'10px 0px 0px 0px',display:'flex'}}>
        <span style={{marginLeft:'25px'}}>03车厢18A号</span> <span>李亚</span>
          <p style={{marginLeft:'150px'}}>退款成功</p>
        </div>
      <div style={{margin:'10px 0px 0px 0px'}}>
        <span style={{marginLeft:'25px'}}>2022 06-15 06:24至07:14</span>
      </div>
      <Button style={{ marginLeft:'295px',
      borderRadius:'20px 20px 20px 20px',
      border:'1px solid #ccc', backgroundColor:'#fff'}}>退出订单</Button>
    </div>
    </div>
  )
}

export default Order